<template>
  <div class="prediction-container" :style="{ backgroundColor: bgColor }">
    <h2>交通标志识别</h2>
    
    <div class="upload-section">
      <input
        type="file"
        ref="fileInput"
        @change="handleFileChange"
        accept="image/*"
        style="display: none"
      />
      <button class="upload-btn" @click="$refs.fileInput.click()">
        选择图片
      </button>
      <span v-if="selectedFile" class="file-name">
        已选择: {{ selectedFile.name }}
      </span>
    </div>

    <div v-if="loading" class="loading">
      识别中...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="prediction" class="prediction-result">
      <div class="result-header">
        <h3>识别结果</h3>
        <div class="prediction-time">
          识别时间：{{ formatTime(new Date()) }}
        </div>
      </div>

      <div class="result-content">
        <div class="image-section">
          <img :src="previewUrl" alt="预测图片" />
          <div class="image-info">
            <div class="info-item">
              <span class="label">图片尺寸：</span>
              <span class="value">{{ prediction.original_size[0] }} x {{ prediction.original_size[1] }}</span>
            </div>
            <div class="info-item">
              <span class="label">处理尺寸：</span>
              <span class="value">{{ prediction.processed_size[0] }} x {{ prediction.processed_size[1] }}</span>
            </div>
          </div>
        </div>

        <div class="prediction-details">
          <div class="main-prediction">
            <h4>主要预测结果</h4>
            <div class="prediction-item">
              <span class="label">标志类型：</span>
              <span class="value">{{ prediction.label }}</span>
            </div>
            <div class="prediction-item">
              <span class="label">英文名称：</span>
              <span class="value">{{ prediction.english_label }}</span>
            </div>
            <div class="prediction-item">
              <span class="label">置信度：</span>
              <span class="value">{{ (prediction.confidence * 100).toFixed(2) }}%</span>
            </div>
            <div class="prediction-item">
              <span class="label">预测类型：</span>
              <span class="value">{{ getPredictionType(prediction.prediction_type) }}</span>
            </div>
            <div class="prediction-item">
              <span class="label">是否限速标志：</span>
              <span class="value">{{ prediction.is_speed_limit ? '是' : '否' }}</span>
            </div>
          </div>

          <div class="confidence-details">
            <h4>各类型预测置信度</h4>
            <div class="confidence-item">
              <span class="label">彩色预测：</span>
              <span class="value">{{ (prediction.color_confidence * 100).toFixed(2) }}%</span>
            </div>
            <div class="confidence-item">
              <span class="label">二值化预测：</span>
              <span class="value">{{ (prediction.binary_confidence * 100).toFixed(2) }}%</span>
            </div>
            <div class="confidence-item">
              <span class="label">限速专用预测：</span>
              <span class="value">{{ (prediction.speed_confidence * 100).toFixed(2) }}%</span>
            </div>
          </div>

          <div class="top-predictions">
            <h4>Top 3 预测结果</h4>
            <div v-for="(pred, index) in prediction.top3_predictions" :key="index" class="top-prediction-item">
              <div class="rank">{{ index + 1 }}</div>
              <div class="pred-info">
                <div class="pred-label">{{ pred.label }}</div>
                <div class="pred-english">{{ pred.english_label }}</div>
                <div class="pred-confidence">{{ (pred.confidence * 100).toFixed(2) }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../api/config'

const fileInput = ref(null)
const selectedFile = ref(null)
const previewUrl = ref('')
const prediction = ref(null)
const loading = ref(false)
const error = ref('')
const bgColor = ref('#ffffff')

// 获取系统设置
const fetchSettings = async () => {
  try {
    const response = await api.get('/api/settings/current')
    bgColor.value = response.data.prediction_bg_color || '#ffffff'
  } catch (error) {
    console.error('获取设置失败:', error)
  }
}

const handleFileChange = (event) => {
  const file = event.target.files[0]
  if (file) {
    selectedFile.value = file
    previewUrl.value = URL.createObjectURL(file)
    predictImage(file)
  }
}

const predictImage = async (file) => {
  loading.value = true
  error.value = ''
  prediction.value = null

  const formData = new FormData()
  formData.append('file', file)

  try {
    const response = await api.post('/api/predict', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    prediction.value = response.data
  } catch (err) {
    error.value = err.response?.data?.error || '预测失败，请重试'
  } finally {
    loading.value = false
  }
}

const formatTime = (date) => {
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
}

const getPredictionType = (type) => {
  const types = {
    'color': '彩色预测',
    'binary': '二值化预测',
    'speed': '限速专用预测'
  }
  return types[type] || type
}

onMounted(() => {
  fetchSettings()
})
</script>

<style scoped>
.prediction-container {
  padding: 2rem;
  min-height: calc(100vh - 64px);
}

.upload-section {
  margin: 2rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.upload-btn {
  padding: 0.75rem 1.5rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.upload-btn:hover {
  background-color: #3aa876;
}

.file-name {
  color: #666;
}

.loading {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.error {
  color: #dc3545;
  text-align: center;
  padding: 1rem;
  background-color: #f8d7da;
  border-radius: 4px;
  margin: 1rem 0;
}

.prediction-result {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-top: 2rem;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.prediction-time {
  color: #666;
  font-size: 0.9rem;
}

.result-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
}

.image-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.image-section img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 4px;
  background: #f8f9fa;
}

.image-info {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 4px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.info-item:last-child {
  margin-bottom: 0;
}

.prediction-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.main-prediction,
.confidence-details,
.top-predictions {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 4px;
}

h4 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
}

.prediction-item,
.confidence-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}

.prediction-item:last-child,
.confidence-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.label {
  color: #666;
}

.value {
  color: #2c3e50;
  font-weight: 500;
}

.top-prediction-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: white;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.top-prediction-item:last-child {
  margin-bottom: 0;
}

.rank {
  width: 24px;
  height: 24px;
  background: #42b983;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: bold;
}

.pred-info {
  flex: 1;
}

.pred-label {
  font-weight: 500;
  color: #2c3e50;
}

.pred-english {
  font-size: 0.9rem;
  color: #666;
}

.pred-confidence {
  font-size: 0.9rem;
  color: #42b983;
  font-weight: 500;
}
</style> 